<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <title> Smart Search</title>
    <link rel=icon href=static/favicon.png>
    <style>
        .photo-container {
  max-width: 960px;
  margin: 0 auto;
}

.photos {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: stretch;
  padding: 0;
  max-width: 980px;
}

.photos img {
  display: block;
  float: left;
  flex: 0 0 auto;
  margin-left: 4px;
  max-height: 200px;
}


@media screen and (min-width: 1024px) {
  .photos img {
    width: calc(100%/6);
    height: calc(100%/6);
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .photos img {
    width: calc(100%/4);
    height: calc(100%/4);
  }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
  .photos img {
    width: calc(100%/3);
    height: calc(100%/3);
  }
}

@media screen and (min-width: 321px) and (max-width: 480px) {
  .photos img {
    width: calc(100%/2);
    height: calc(100%/2);
  }
}

@media screen  and (max-width: 320px) {
  .photos img {
    width: 100%;
    height: 100%;
  }
}
    </style>
        </head>
    <body>
    
            <div class="container">
                    <div class="container"><a href="#" data-target="nav-mobile" class="top-nav sidenav-trigger full medium black-text"><i class="material-icons">menu</i></a></div>
                  <ul id="nav-mobile" class="sidenav z-depth-2">
                        <li class="brand-logo center"><img src="static/logo.jpg" height="40%" width="40%"/></li>
                        <hr>
                        <li class="bold"><a href="{{ url_for('index') }}" class="collapsible-header waves-effect"><i class="material-icons">home</i>Home </a></li>
                        <li class="bold"><a href="{{ url_for('search') }}" class="collapsible-header waves-effect"><i class="material-icons">search</i>Image Search</a></li>
                        <li class="bold"><a href="{{ url_for('database') }}" class="collapsible-header waves-effect"><i class="material-icons">folder</i>Database</a></li>
                        <li class="bold"><a href="{{ url_for('caption') }}" class="collapsible-header waves-effect"><i class="material-icons">remove_red_eye</i>Caption it!</a></li>
                        <hr>
                        <li class="bold center"> Made by <b>Sethu Iyer</b></li>
                    </ul>  
                  <br><br>
                        {% block content %}{% endblock %}
                  </div>
                  
                 
                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
            <script>
              M.AutoInit()
              $(document).ready(function(){
    $('.sidenav').sidenav();
  });
        </script>
    </body>
  </html>